import { createBrowserRouter } from 'react-router-dom'
import { lazy, Suspense } from 'react'
import App from '../App'
import Start from '../pages/startpage/index'
import ErrorBoundary from '../components/ErrorBoundary'
const Login = lazy(() => import('../pages/login/index'))
const Register = lazy(() => import('../pages/register/index'))
const Eeorr = lazy(() => import('../pages/notfound/index'))
// 主要页面路由
const Home = lazy(() => import('../pages/tab/home/index'))
const Circle = lazy(() => import('../pages/tab/circle/index'))
const Kepu = lazy(() => import('../pages/tab/kepu/index'))
const My = lazy(() => import('../pages/tab/my/index'))
const Search = lazy(() => import('../pages/search/index'))
const SearchTest = lazy(() => import('../pages/search/test'))
const Detail = lazy(() => import('../pages/detail/simple'))
const DetailTest = lazy(() => import('../pages/detail/test'))
const CircleComment = lazy(() => import('../pages/tab/circle/commentDetail'))
// const Bingzheng = lazy(() => import('../pages/allsompage/bingzheng/index'))

// 一级路由
const router = createBrowserRouter([
    // 重定向
    {
        index: true,
        element: <Start></Start>
    },
    {
        path: '/',
        element: <App />,
        children: [
            {
                path: '/home',
                element: <Home></Home>
            },
            {
                path: '/circle',
                element: <Circle></Circle>
            },
            {
                path: '/circle/comment',
                element: <CircleComment></CircleComment>
            },
            {
                path: '/kepu',
                element: <Kepu></Kepu>
            },
            {
                path: '/my',
                element: <My></My>
            },
            {
                path: '/search',
                element: (
                    <ErrorBoundary>
                        <Suspense fallback={
                            <div style={{
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center',
                                height: '100vh',
                                backgroundColor: '#f5f5f5'
                            }}>
                                <div style={{
                                    width: '40px',
                                    height: '40px',
                                    border: '4px solid #f3f3f3',
                                    borderTop: '4px solid #1677ff',
                                    borderRadius: '50%',
                                    animation: 'spin 1s linear infinite'
                                }}></div>
                                <style>{`
                                    @keyframes spin {
                                        0% { transform: rotate(0deg); }
                                        100% { transform: rotate(360deg); }
                                    }
                                `}</style>
                            </div>
                        }>
                            <Search />
                        </Suspense>
                    </ErrorBoundary>
                )
            },
            {
                path: '/search-test',
                element: <SearchTest></SearchTest>
            },
            {
                path: '/detail',
                element: <Detail></Detail>
            },
            {
                path: '/detail-test',
                element: <DetailTest></DetailTest>
            },
            // 404页面
            {
                path: '*',
                element: <Eeorr></Eeorr>
            }
        ]
    },
    // 启动页面
    {
        path: '/start',
        element: <Start></Start>
    },
    // 登录注册页面
    {
        path: '/login',
        element: <Login></Login>
    },
    {
        path: '/register',
        element: <Register></Register>
    },
    // 对应病症页面
    // {
    //     path:'/bingzheng',
    //     element:<Bingzheng></Bingzheng>
    // }
])
export default router
